import React, { useEffect, useState } from 'react'
import Heart from './components/Heart';
import { listApi } from '../../api/http';
import { Button, Form, Popconfirm, Space, Switch, Table, Tag } from 'antd';
import dayjs from 'dayjs'
import SearchForm from './components/SearchForm';
import { useLoaderData } from 'react-router-dom';
import FormBox from './components/FormBox';
import request from '../../utlis/request';
function Home() {
    // ==================================================================================================================
    const authBtn = useLoaderData()
    const addBtn = authBtn.includes('add')
    const editBtn = authBtn.includes('edit')
    const deletBtn = authBtn.includes('delet')
    // ==================================================================================================================
    const [total, setTotal] = useState(0)
    const [pageNum, setPageNum] = useState(1)
    const [pageSize, setPageSize] = useState(5)

    // 搜索   job, name, schema_name, status, type, start_time, end_time, pageSize, pageNum
    const [name, setName] = useState("")
    const [job, setJob] = useState("")
    const [status, setStatus] = useState("")
    const [start_time, setStart_time] = useState("")
    const [end_time, setEnd_time] = useState("")
    const ss = (value) => {
        setName(value.name)
        setJob(value.job)
        setStatus(value.status ? 1 : 0)
        setStart_time(value.rangepicker[0])
        setEnd_time(value.rangepicker[1])
    }
    const cz = () => {
        setName("")
        setJob("")
        setStatus("")
        setStart_time("")
        setEnd_time("")
    }
    // ==================================================================================================================
    const [arr, setArr] = useState([])
    const ListData = async () => {
        let res = await listApi({ pageNum, pageSize, name, job, status, start_time, end_time })
        console.log(res);
        const { code, list, total } = res.data
        if (code === 1) {
            setTotal(total)
            setArr(list)
        }

    }

    useEffect(() => {
        ListData()
    }, [pageNum, pageSize, name, job, status, start_time, end_time])
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },

        {
            title: '职业',
            dataIndex: 'job',
            render: (item) => (
                <Tag color={item === '销售员' ? 'green' : item === '总经理' ? 'blue' : 'red'}>{item}</Tag>
            )
        },
        {
            title: '职业状态',
            dataIndex: 'type',
        },
        {
            title: '公司',
            dataIndex: 'schema_name',
        },
        {
            title: '公司人数',
            dataIndex: 'person_num',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (status) => (
                <Switch checked={status === 1} ></Switch >
            )
        },
        {
            title: '时间',
            dataIndex: 'create_time',
            render: (item) => {
                return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        {
            title: '操作',
            render: (item) => (
                <Space>
                    {editBtn && <Button onClick={() => { editFn(item) }}>编辑</Button>}

                    <Popconfirm
                        title="是否确认删除"
                        onConfirm={() => { confirm(item.id) }}
                        okText="确认"
                        cancelText="取消"
                    >
                        {deletBtn && <Button danger>删除</Button>}
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    // 删除
    const confirm = async (id) => {
        let res = await request.delete('/delSchema', { params: { id: id } })
        console.log(res);
        const { code } = res.data
        if (code === 1) {
            ListData()
            alert('删除成功')
        }
    }
    // ==================================================================================================================
    // 新增编辑
    const [show, setShow] = useState(false)
    const [title, setTitle] = useState("")
    const [form] = Form.useForm()
    const addFn = () => {
        setShow(true)
        setTitle('新增')
    }
    const editFn = (item) => {
        setShow(true)
        setTitle('编辑')
        form.setFieldsValue(item)
    }
    const gb = () => {
        setShow(false)
        form.resetFields()
    }

    const onFinish = async (value) => {
        if (value.id) {
            console.log('编辑');
            let res = await request.put('/editSchema', value)
            console.log(res);
            const { code } = res.data
            if (code === 1) {
                gb()
                ListData()
                alert('编辑成功')
            }
        } else {
            console.log('新增');
            let res = await request.post('/addSchema', value)
            console.log(res);
            const { code } = res.data
            if (code === 1) {
                gb()
                ListData()
                alert('编辑成功')
            }
        }
    }
    return (
        <div>
            {/* 新增编辑弹框 */}
            <FormBox show={show} title={title} form={form} gb={gb} onFinish={onFinish} />
            {/* ==================== */}
            <Form></Form>
            <Heart />
            <SearchForm ss={ss} cz={cz} />
            {addBtn && <Button onClick={() => { addFn() }}>新增</Button>}
            <Table dataSource={arr} columns={columns}
                rowKey={'id'}
                pagination={
                    {
                        pageSize: pageSize,
                        pageNum: pageNum,
                        total: total,
                        onChange: (page, pageSize) => {
                            setPageNum(page)
                            setPageSize(pageSize)
                        }
                    }
                }
            />
        </div>
    )
}

export default Home
